<template>
  <!-- 搜索框 -->
  <view class="cu-bar search bg-white">
    <view class="search-form round">
      <!-- 这些class可以在   src/styles/icons.scss   中找到 -->
      <text class="cuIcon-search"></text>
      <input
        v-model="searchtext"
        :adjust-position="false"
        type="text"
        placeholder="搜索单词"
        class="search-input"
        @input="onInput"
        @confirm="onConfirm"
        confirm-type="search"
        @tap="onTap"
      />
    </view>
    <view class="action">
      <button class="cu-btn bg-red shadow-blur round" @tap="clickSearch1" v-if="pduan">搜索</button>
      <button class="cu-btn bg-red shadow-blur round" @tap="clickSearch11" v-else>返回</button>
    </view>
  </view>

  <template v-if="pduan">
    <view
      v-for="(item, index) in listjieguo"
      :key="index"
      style="height: 150rpx; border-bottom: 1px solid #d8d6d6"
      @tap="dianji(index, item)"
    >
      <view style="font-size: 40rpx; padding-left: 30rpx; padding-top: 20rpx">
        {{
        item.dangci
        }}
      </view>
      <view style="font-size: 30rpx; color: #81868b; padding-left: 30rpx; padding-top: 20rpx">
        {{
        item.jieshi
        }}
      </view>
    </view>
  </template>

  <template v-else>
    <!-- 空白页组件 -->
    <noThing></noThing>
  </template>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

import { getWord } from '@/services/kaosi'
import { onLoad, onShow } from '@dcloudio/uni-app'
import { guanzhuStore, myStore, ShouyeStore } from '@/stores'
import noThing from '@/components/common/noThing.vue'
const pduan = ref(true)
const nianji1 = ShouyeStore()
const listjieguo = ref<any>([
  {
    danci: 'planted',
    jieshi: 'vbl.种植',
  },
])
onLoad(async (e: any) => {
  // 监听全局关注和顶踩事件
  let res = await getWord({ nianji: nianji1.nianji })
  listjieguo.value = res.data
  console.log(listjieguo.value)
})
const dianji = (index: any, item: any) => {
  console.log(index, item)
  uni.navigateTo({
    url:
      '../danci_xiangqin/index?dangci=' +
      item.dangci +
      '&jieshi=' +
      item.jieshi +
      '&index=' +
      index,
  })
}
</script>

<style lang="scss">
@import url('../../static/assets/wxss/iconfont.css');
@import url('../../components/animate.min.css');

.lishi {
  padding-left: 20rpx;
  padding-right: 20rpx;
  font-size: 35rpx;
  // 颜色为灰色
  color: #858e98;
}
.jieguo {
  display: flex;
  flex-wrap: wrap;
}
.shuju {
  color: #81868b;
  padding-left: 20rpx;
  padding-right: 20rpx;
  border-width: 1rpx;
  border-style: solid;
  border-color: #858e98;
  margin-left: 20rpx;
  margin-right: 20rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
  border-radius: 8rpx;
  font-size: 30rpx;
}
//点击后的样式
.yans {
  background-color: #dae0e5;
}
</style>
